<template>
  <div>
    <h2>当前的和为: {{ sum }}</h2>
    <button @click="sum++">点我+1</button>
  </div>
</template>

<script>
import {
  onBeforeMount,
  onBeforeUnmount,
  onBeforeUpdate,
  onMounted,
  onUnmounted,
  onUpdated,
  ref,
} from "vue";
export default {
  name: "Demo",

  setup() {
    console.log('----setup----');
    let sum = ref(0);

    onBeforeMount(() => {
      console.log("----onBeforeMount----");
    });
    onMounted(() => {
      console.log("----onMounted----");
    });
    onBeforeUpdate(() => {
      console.log("----onBeforeUpdate----");
    });
    onUpdated(() => {
      console.log("----onUpdated----");
    });
    onBeforeUnmount(() => {
      console.log("----onBeforeUnmount----");
    });
    onUnmounted(() => {
      console.log("----onUnmounted----");
    });

    return {
      sum,
    };
  },
};
</script>